<template>
  <div>
    <el-steps simple style="background: #598fff;">
      <el-step title="所属部门" icon="el-icon-school"></el-step>
      <el-step title="对应岗位" icon="el-icon-postcard"></el-step>
      <el-step title="分配角色" icon="el-icon-coordinate"></el-step>
      <el-step title="已关联菜单" icon="el-icon-document"></el-step>
    </el-steps>
    <el-row>
      <el-col :span="4" style="height: calc(100vh - 100px);border: 1px solid #e2e2e2;">
        <el-tree :data="companyList" node-key="id" ref="companyOrgTree" :expand-on-click-node="false" :default-expand-all="true" :highlight-current="true" :render-content="renderCompanyTree" :check-strictly="true" @check-change="handleCheckChange" @node-click="handleNodeClick">
        </el-tree>
      </el-col>
      <el-col :span="8" style="height: calc(100vh - 100px);">
        <div style="margin:20px 10px 0px 10px;">
          <el-form :inline="true" ref="form" :model="form" label-width="80px" class="demo-form-inline">
            <el-form-item label="岗位名称">
              <el-input v-model="form.tenantName"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" class="mb-1" icon="el-icon-search" size="middle" @click="getPostPage">
                查询
              </el-button>
            </el-form-item>
          </el-form>
        </div>
        <el-table ref="postTable" :data="tableData" border style="width: 96%;margin: 0px 10px ;" height="calc(100vh - 230px)" row-key="id" highlight-current-row @current-change="handleTableItemChange">
          <el-table-column type="index" label="序号" width="50">
          </el-table-column>
          <el-table-column prop="postName" label="岗位名称">
          </el-table-column>
          <el-table-column prop="status" label="状态" width="150">
            <template slot-scope="scope">
              <el-tag type="success" v-if="scope.row.status==='0'">正常</el-tag>
              <el-tag type="danger" v-else>停用</el-tag>
            </template>
          </el-table-column>
        </el-table>
        <div style="margin-top: 8px;">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="params.pageNum" :page-sizes="[10, 20, 50]" :page-size="params.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
        </div>
      </el-col>
      <el-col :span="8" style="height: calc(100vh - 100px);border: 1px solid #e2e2e2;">
        <div style="margin:20px 10px 0px 10px;">
          <el-form :inline="true" ref="form" :model="form" label-width="80px" class="demo-form-inline">
            <el-form-item label="角色名称">
              <el-input v-model="form.tenantName"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" class="mb-1" icon="el-icon-search" size="middle" @click="getRolePage">
                查询
              </el-button>
            </el-form-item>
          </el-form>
        </div>
        <el-table ref="multipleTable" :data="roleData" border style="width: 96%;margin: 0px 10px ;" height="calc(100vh - 230px)" row-key="id" @select="handleSelect">
          <el-table-column type="selection" width="55">
          </el-table-column>
          <el-table-column prop="roleName" label="角色名称">
          </el-table-column>
          <el-table-column prop="permissionNum" label="关联权限" width="100">
          </el-table-column>
          <el-table-column prop="menuNum" label="关联菜单数" width="100">
          </el-table-column>
        </el-table>
        <div style="margin-top: 8px;">
          <el-pagination @size-change="handleRoleSizeChange" @current-change="handleRoleCurrentChange" :current-page="roleParams.pageNum" :page-sizes="[10, 20, 50]" :page-size="roleParams.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="roleTotal"></el-pagination>
        </div>
      </el-col>
      <el-col :span="4">
        <el-row style="margin-top: 10px;">
          <el-col :span="6">
            <!-- 测试 -->
          </el-col>
          <el-col :span="18">
            <!-- {{ getCurrentOrgName() }} -->
          </el-col>
          <el-col :span="24">
            当前已关联如下功能：
          </el-col>
        </el-row>
        <el-tree :data="menuTree" :props="props" node-key="id" :expand-on-click-node="false" :default-expand-all="true" style="margin-top: 20px;">
        </el-tree>
      </el-col>
    </el-row>
  </div>
</template>
    
<script>
import { getCompanyTree } from "@/api/company";
import { getPostPage } from "@/api/post";
import { getRolePage, getRoleIdsByPostId, setPostRoleRel } from "@/api/role";
import { getMenuListByPostId } from '@/api/menu'
export default {
  data () {
    return {
      form: {
        fileName: '',
        transStatus: ''
      },
      params: {
        pageNo: 1,
        pageSize: 10,
      },
      total: 0,
      tableData: [],
      isShowDialog: false,
      isShowDelete: false,
      companyList: [],
      orgItem: undefined,
      selectOrgId: '',
      postItem: undefined,
      selectPostId: '',
      roleParams: {
        pageNo: 1,
        pageSize: 10,
      },
      roleTotal: 0,
      roleData: [],
      selectRoleList: [],
      menuTree: [],
      props: {
        label: 'menuName',
        children: 'children'
      },
    }
  },
  mounted () {
    this.params.pageNo = parseInt(this.$route.query.pageNo)
    this.params.pageSize = parseInt(this.$route.query.pageSize)
    this.selectPostId = this.$route.query.postId
    this.selectOrgId = this.$route.query.orgId
    this.getCompanyTree()
    this.getRolePage()
    this.getMenuListByPostId()
  },
  methods: {
    getCompanyTree () {
      getCompanyTree().then((res) => {
        if (res.status === 200) {
          this.companyList = res.data;
          if (this.companyList.length > 0) {
            // this.orgItem = this.companyList[0]
            this.orgItem = this.companyList.find(item => this.selectOrgId === item.id)
            const id = this.orgItem.id
            this.$refs.companyOrgTree.setCheckedKeys([id]);
            this.getPostPage()
          }
        } else {
          this.$message(res.message);
        }
      });
    },
    renderCompanyTree (h, { node, data, store }) {
      let fontSize = "14px"
      let textColor = 'black'
      if (node.checked) {
        textColor = 'blue'; // 选中时文字变为红色
      }
      let labelV = node.data.companyName === undefined ? node.data.orgName : node.data.companyName
      return h('span', [
        // h("i", {
        //   class: iconName, style: {
        //     fontSize: "14px"
        //   }
        // }),
        // h('span', '内层文本1'), h('span', '内层文本2'),
        h('span', {
          style: {
            fontSize: fontSize,
            color: textColor
          }
        }, labelV)
      ]);
    },
    handleCheckChange (data, checked, indeterminate) {
      if (checked && data.children && data.children.length > 0) {
        // 如果父节点被选中，手动取消子节点的选中状态
        data.children.forEach(child => {
          this.$refs.tree.setChecked(child.id, false);
        });
      }
    },
    handleNodeClick (data) {
      this.$refs.companyOrgTree.setCheckedKeys([data.id]);
      this.params.pageNo = 1
      this.orgItem = data
      this.selectOrgId = data.id
      this.getPostPage()
    },
    getPostPage () {
      const params = { ...this.params, orgId: this.orgItem.id }
      getPostPage(params).then((res) => {
        if (res.status === 200) {
          this.tableData = res.data.records;
          this.total = res.data.total
          this.postItem = this.tableData.find(item => this.selectPostId === item.id)
          this.$refs.postTable.setCurrentRow(this.postItem)
        } else {
          this.$message(res.message);
        }
      });
    },
    handleSizeChange (row) {
      this.params.pageSize = row
      this.params.pageNo = 1
      this.getPostPage()
    },
    handleCurrentChange (row) {
      this.params.pageNo = row
      this.getPostPage()
    },
    getRolePage () {
      const params = { ...this.roleParams }
      getRolePage(params).then((res) => {
        if (res.status === 200) {
          this.roleData = res.data.records;
          this.roleTotal = res.data.total
          // this.getRoleIdsByPostId()
        } else {
          this.$message(res.message);
        }
      });
    },
    handleRoleSizeChange (row) {
      this.roleParams.pageSize = row
      this.roleParams.pageNo = 1
      this.getRolePage()
    },
    handleRoleCurrentChange (row) {
      this.roleParams.pageNo = row
      this.getRolePage()
    },
    handleTableItemChange (val) {
      this.postItem = val;
      this.selectPostId = val.id
      // debugger
      this.getRoleIdsByPostId()
      this.getMenuListByPostId()
    },
    getRoleIdsByPostId () {
      const params = { postId: this.selectPostId }
      getRoleIdsByPostId(params).then((res) => {
        if (res.status === 200) {
          this.selectRoleList = res.data;
        } else {
          this.$message(res.message);
        }
      });
    },
    handleSelect (selection, row) {
      const params = { postId: this.selectPostId, roleList: selection }
      setPostRoleRel(params).then((res) => {
        if (res.status === 200) {
          // this.getRoleIdsByOrgId()
          this.$message({
            message: '配置成功',
            type: 'success'
          });
          this.getMenuListByPostId()
        } else {
          this.$message(res.message);
        }
      });
    },
    getMenuListByPostId () {
      const params = { postId: this.selectPostId }
      getMenuListByPostId(params).then((res) => {
        if (res.status === 200) {
          this.menuTree = res.data;
        } else {
          this.$message(res.message);
        }
      });
    },
  },
  watch: {
    selectRoleList (newValue, oldValue) {
      if (newValue.length > 0 || newValue !== undefined) {
        const that = this;
        that.$refs.multipleTable.clearSelection()
        setTimeout(function () {
          that.roleData.forEach(item => {
            // 假设我们要默认选中id为2的行
            const rowToSelect = newValue.find(row =>
              row === item.id
            );
            if (rowToSelect) {
              that.$refs.multipleTable.toggleRowSelection(item);
            }
          })
        }, 50);
      }
    }
  },
}
</script>
    
<style scoped>
::v-deep .el-table__body tr.current-row > td.el-table__cell,
.el-table__body tr.selection-row > td.el-table__cell {
  background-color: white !important;
  color: blue !important;
}
::v-deep .el-step__title.is-wait {
  color: white;
}

::v-deep .el-step__icon-inner {
  color: white;
}

::v-deep .el-table .el-table__cell {
  padding: 8px 0;
}
</style>